<template>
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>社团</el-breadcrumb-item>
      <el-breadcrumb-item>{{teamName}}</el-breadcrumb-item>
      <el-breadcrumb-item><b>社团成员</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 数据表格的工具栏 -->
  <!--  <div style="text-align: left">-->
  <!--    <el-button-group>-->
  <!--      <el-button type="primary" :icon="Plus" @click="dialogAddState=true" />-->
  <!--    </el-button-group>-->
  <!--  </div>-->
  <!-- 数据表格 -->
  <el-table :data="tableNews" stripe border style="width: 100%">
    <el-table-column prop="sname" label="姓名"  />
    <el-table-column prop="sid" label="学号" />
    <el-table-column prop="gender" label="性别" />
    <el-table-column prop="dept" label="年级" />
    <el-table-column prop="phone" label="联系方式" width="150"/>
    <el-table-column label="操作"  width="250" v-if="teamRole==='社长'">
      <template #default="scope">
        <el-button size="small" @click="tableEditHandler(scope.$index, scope.row)">
          <el-icon><Edit /></el-icon>编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="tableDeleteHandler(scope.$index, scope.row)">
          <el-icon><Delete /></el-icon>删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增模态框 -->
  <!--  <el-dialog v-model="dialogAddState" title="成员信息" width="700">-->
  <!--    <div>-->
  <!--      <el-form ref="formAddRef" :model="formAdd" label-width="120px">-->
  <!--        <el-form-item prop="sname" label="姓名">-->
  <!--          <el-input v-model="formAdd.sname"></el-input>-->
  <!--        </el-form-item>-->
  <!--        <el-form-item prop="sid" label="学号">-->
  <!--          <el-input v-model="formAdd.sid"></el-input>-->
  <!--        </el-form-item>-->
  <!--        <el-select v-model="formAdd.gender">-->
  <!--          <el-option label="请选择" value=""></el-option>-->
  <!--          <el-option key="1" label="男" value="1"></el-option>-->
  <!--          <el-option key="2" label="女" value="2"></el-option>-->
  <!--        </el-select>-->
  <!--        <el-form-item prop="dept" label="年级">-->
  <!--          <el-input v-model="formAdd.dept" ></el-input>-->
  <!--        </el-form-item>-->
  <!--        <el-form-item prop="phone" label="联系方式">-->
  <!--          <el-input v-model="formAdd.phone" ></el-input>-->
  <!--        </el-form-item>-->
  <!--      </el-form>-->
  <!--    </div>-->
  <!--    <template #footer>-->
  <!--      <div class="dialog-footer">-->
  <!--        <el-button @click="dialogAddOnReset">取消</el-button>-->
  <!--        <el-button type="primary"  @click="dialogAddOnSubmit" >确认</el-button>-->
  <!--      </div>-->
  <!--    </template>-->
  <!--  </el-dialog>-->

  <!-- 编辑模态框 -->
  <el-dialog v-model="dialogEditState" title="成员信息" width="700">
    <div>
      <el-form ref="sname" :model="formEdit" label-width="120px">
        <el-form-item prop="sname" label="姓名">
          <el-input v-model="formEdit.sname":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="sid" label="学号">
          <el-input v-model="formEdit.sid":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-input v-model="formEdit.gender":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="dept" label="年级">
          <el-input v-model="formEdit.dept":disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="联系方式">
          <el-input v-model="formEdit.phone" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[1,5,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
import {Edit , Delete , Plus} from "@element-plus/icons";
import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from "@/utils/amusement"
import axios from 'axios';

//分页
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const getMember=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    teamid : JSON.parse(sessionStorage.getItem('loginUser')).teamid
    // 初始时不包含其他参数
  };
  request({
    url:'/sys/team/gets1',
    method:'get',
    params,
  }).then((req)=>{
    if (req.data.errorCode==200){
      tableNews.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getMember()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getMember()
}


//新建个axios对象
const httpClient = axios.create({
  validateStatus(status) {
    return status >= 200 && status < 504 // 设置默认的合法的状态
  },
  timeout: 10000   //超时时间10秒
});


httpClient.defaults.retry = 3 // 请求重试次数
httpClient.defaults.retryDelay = 1000 // 请求重试时间间隔
httpClient.defaults.shouldRetry = true // 是否重试

//添加请求拦截器
httpClient.interceptors.request.use(
    config => {
      //添加header
      config.headers['Content-Type'] = 'application/json'
      config.headers['Accept-Language'] = 'zh-CN'
      config.headers['auth-token'] = sessionStorage.getItem('token') // 或者loginUser.token
      if (config.method === 'post') {
        if (!config.data) { // 没有参数时，config.data为null，需要转下类型
          config.data = {}
        }
        // config.data = JSON.stringify(config.data) // qs序列化参数
      }
      return config
    },
    err => {
      //Promise.reject()方法返回一个带有拒绝原因的Promise对象，在F12的console中显示报错
      Promise.reject(err)
    }
);

let teamName = JSON.parse(sessionStorage.getItem('loginUser')).team
const searchFormRef = ref()
const searchFormModel = reactive({
  teamid : JSON.parse(sessionStorage.getItem('loginUser')).teamid
  // teamid : 1
})

const getMenu = () => {
  request({
    url:'/sys/team/gets',
    method:'get',
    params:searchFormModel
  }).then(req=>{
    if (200 == req.data.errorCode){
      tableNews.value=req.data.data
    }
  })
};


onMounted(()=>{
  // getMenu()
  getMember()
})

// 菜品类别
const menuType = ref([])
///////// 表格 //////////////////
// 表格的数据
const tableNews = ref([])
// 表格的动作
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formEdit.sname = rowData.sname
  formEdit.sid = rowData.sid
  formEdit.gender = rowData.gender
  formEdit.dept = rowData.dept
  formEdit.phone = rowData.phone

  dialogEditState.value = true

}
const tableDeleteHandler = (rowIndex , rowData) => {

  ElMessageBox.confirm(
      '确认删除 : ' +rowData.sname,
      'Warning',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      },
  ).then(() => {
    formDelData.sid  = rowData.sid
    request({
      method: 'put',
      url:'/sys/team/delete2',
      data: JSON.stringify(formDelData),
      headers: { 'content-type': "application/json;charset=UTF-8" },
    }).then(req=>{
      if (200 == req.data.errorCode) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getMenu()
      }
    })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//////////////  新增模态框相关  ///////////////////////
const dialogAddState = ref(false)
const dialogAddOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'post',
    url:'/sys/menu/add',
    params:formAdd
  }).then(req => {
    ElMessage({
      type: 'info',
      message:req.data.msg
    })
    if (200 == req.data.errorCode) {
      // console.log("添加成功")
      getMenu()
    }
  });
  dialogAddState.value = false
}
const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}
// 新增表单引用
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  sname : '' ,
  sid : '' ,
  gender : '' ,
  dept: '',
  phone : ''
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})
// 新增表单初始化数据
const formDelData = {
  sid : '' ,
  teamid : JSON.parse(sessionStorage.getItem('loginUser')).teamid
}
// 新增表单绑定数据模型
const formDel = reactive({...formDelData})   // ...formAddData 解构formAddData

//////////////  编辑模态框相关  ///////////////////////
const dialogEditState = ref(false)
const dialogEditOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method: 'put',
    url:'/sys/funstudent/update',
    data: JSON.stringify(formEdit),
    headers: { 'content-type': "application/json;charset=UTF-8" },
  }).then(req => {
    if (200 == req.data.errorCode) {
      ElMessage({
        type: 'success',
        message: "修改成功"
      });
      getMenu()
    } else {
      ElMessage({
        type: 'error',
        message: req.data.msg
      });
    }
  });
  dialogEditState.value = false
}
const dialogEditOnReset = () => {
  // 清空表单数据
  Object.assign(formEdit , formEditData)
  // 关闭对话框
  dialogEditState.value = false
}
// 新增表单引用
const formEditRef = ref()
// 新增表单初始化数据
const formEditData = {
  sname : '' ,
  sid : '' ,
  gender : '' ,
  dept : '' ,
  phone: '',
}
// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})

</script>

<script>

export default {
  data() {
    return {
      teamRole:''
    };
  },
  mounted() {
    this.teamRole = JSON.parse(sessionStorage.getItem('loginUser')).teamRole;
  }
};
</script>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
.status-normal {
  color: blue;
}

.status-delayed {
  color: green;
}

.status-cancelled {
  color: red;
}
</style>